<template>
  <div class="notification">
    <!-- top -->
    <van-nav-bar left-arrow title="我的提醒" @click-left="$router.go(-1)" />
    <!-- body -->
    <div class="body">
      <!--  -->
      <div
        class="notifi-item"
        v-for="i in notification.notificationItems"
        :key="i.senderId"
      >
        <div class="contain" v-html="i.content">
        </div>
        <div class="img">
          <img
            :src="`https://file.ituring.com.cn/SmallCover/${
              i.senderAvatarImageKey ? i.senderAvatarImageKey : ''
            }`"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NotificationAPI } from "@/apis";
export default {
  data() {
    return {
      notification: {},
      page: 1,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 网络请求
    async getData() {
      // 主要网络请求
      let { data } = await this.$http(NotificationAPI(this.page), {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      this.notification = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.notification {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 999;
  // top
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
  }
  // body
  .body {
    padding: 50px 15px;
    background-color: #fff;
    .notifi-item {
      display: flex;
      justify-content: space-between;

      .contain {
        width: 345px;
        padding: 20px 0;
      }
      .img {
        img {
          margin-top: 30px;
          width: 40px;
          height: 40px;
          border-radius: 40px;
        }
      }
    }
  }
}
</style>